#history-banner {
    background: url("/media/history_banner.svg");
    /*height: 576px;*/
    height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    margin-top: 7rem;
    position: relative;
}

#about-banner .banner-title,
#history-banner .banner-title {
    position: absolute;
    left: 18%;
    bottom: 47%;
}

#history-banner .recycle-action img{
    position: absolute;
    bottom: 25px;
    left: 37px;
}

#company-history {
    margin-top: 3rem;
    /*background: url("/dist/images/Pr/footer_green_right.svg");*/
    /*background-repeat: no-repeat;*/
    /*background-position: bottom;*/
    /*background-size: contain;*/
    /*position: relative;*/
    /*min-height: 50vh;*/
}

#company-history .header {
    display: flex;
    height: 94px;
    width: 20%;
    background: url("/media/history-bg.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#company-history .header h1 {
    font-family: FuturaGreekCo;
    font-size: 57.6px;
    font-weight: bold;
    font-stretch: condensed;
    color: #fefefe;
    margin: auto;

}

#company-history .header-title {
    font-family: FuturaGreek;
    font-size: 29.8px;
    font-weight: 400;
    color: #729954;
    margin-left: 15%;
}

#company-history .history-wrapper {
    margin-top: 2rem;
    /*padding-bottom: 100px;*/
}

#company-history .history-wrapper .history-event {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0.75rem 0;
}


#company-history .history-wrapper .history-event .event-date {
    font-family: FuturaGreek;
    font-size: 23.5px;
    font-weight: 500;
    color: #729954;
    width: 15%;
}

#company-history .history-wrapper .history-event .description {
    font-family: FuturaGreek;
    font-size: 23.5px;
    color: #58585b;
    font-weight: 400;
    width: 80%;
}

#company-history .history-wrapper .history-event .description img {
    width: 230px;
    height: 160px;
    margin-left: auto;
    object-fit: contain;
}

#company-history .history-wrapper .history-event .description span {
    line-height: 1;
    width: auto;
}
#company-history .history-wrapper .history-event .event-date.hasImage {
    margin-top: auto;
    line-height: 1;
}

#company-history .history-wrapper .history-event .description.hasImage {
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    justify-content: flex-start;

}
@media (max-width: 1199px) {
    #about-banner .banner-title,
    #history-banner .banner-title {
        left: 5%;
    }
    #company-history .header {
        width: 27%;
    }

    #company-history .history-wrapper .history-event .event-date {
        width: 20%;
    }

    #company-history .header-title {
        margin-left: 20%;
    }
}

@media (max-width: 969px) {
    #about-banner .banner-title,
    #history-banner .banner-title {
        left: 5%;
        width: 50%;
        bottom: 45%;
    }
    #company-history .header {
        width: 32%;
    }
}

@media (max-width: 749px) {
    #company-history .history-wrapper .history-event .description img {
        width: 40%;
        height: auto;
        margin-left: 0;
    }

    #about-banner .banner-title,
    #history-banner .banner-title {
        width: 70%;
        left: 5%;
        bottom: 48%;
    }
    #company-history {
        background-position: bottom right;
        background-size: auto;
    }

    #company-history .header {
        width: 56%;
    }

    #company-history .history-wrapper .history-event .event-date {
        width: 45%;
    }

    #company-history .history-wrapper .history-event .description {
        width: 65%;
    }
}

@media (max-width: 480px) {
    #company-history .history-wrapper .history-event .description img {
        display: none;
    }
    #about-banner .banner-title,
    #history-banner .banner-title {
        width: 70%;
        left: 17%;
        top: 2%;
    }
    #history-banner .recycle-action img{
        left: 0;
        right: 0;
        margin: auto;
        bottom: 43%;
    }

    #company-history .header {
        width: 100%;
    }

    #company-history .header-title {
        margin-left: 0;
        margin-top: 1.5rem;
    }

    #company-history .history-wrapper .history-event .description {
        font-size: 20px;
        font-weight: 300;
        width: 65%;
    }
    #company-history .history-wrapper .history-event .event-date {
        width: 55%;
    }
}

main #history-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}